<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: 李中华
 * @Date: 2024-10-17 14:30:59
 * @LastEditTime: 2024-10-18 10:05:50
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域问题</title>

    <!-- 跨域是浏览器受同源策略的限制，同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制（如发送ajax请求，操作dom，读取cookie）。
     "ajax请求地址"=>目标源 
     "当前页面地址"=>所处源。
     源=协议+域名+端口，所处源和目标源的协议+域名+端口都相同才是同源，否则就是非同源，即跨域。
     注意：
     1.跨域限制仅存在浏览器端，服务端不存在跨域限制。
     2.即使跨域了，网络请求也可以正常发出，但响应数据不会交给开发者。
     3.link、script、img...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响。 -->
</head>

<body>


    <button onclick="getDom()">getDom</button>
    <br>

    <button onclick="getCookie()">getCookie</button>
    <br>

    <button onclick="request()">request</button> 返回结果：<span id="result"></span>

    <br>

    <iframe id="myframe" style="width: 20%;" src="./frame.html" frameborder="2"></iframe>
    <iframe id="baiduFrame" style="width: 20%;" src="https://www.baidu.com" frameborder="2"></iframe>

    <script type="text/javascript">
        function getDom() {

            const myframe = document.getElementById('myframe')
            console.log("myframe:", myframe.contentWindow.document) //同源的可以获取，非同源的无法获取
            const baiduFrame = document.getElementById('baiduFrame')
            console.log("baiduFrame:", baiduFrame.contentWindow.document) //同源的可以获取，非同源的无法获取
        }
        function getCookie() {

            const myframe = document.getElementById('myframe')
            console.log("myframe:", myframe.contentWindow.document.cookie) //同源的可以获取，非同源的无法获取
            const baiduFrame = document.getElementById('baiduFrame')
            console.log("baiduFrame:", baiduFrame.contentWindow.document.cookie) //同源的可以获取，非同源的无法获取
        }

        async function request() {

            // var xhr = new XMLHttpRequest();
            // xhr.open('get','http://localhost:3456/api/data');
            // xhr.send();
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState == 4 && xhr.status == 200){
            //         var data = JSON.parse(xhr.responseText);
            //         document.getElementById('result').innerHTML = JSON.stringify(data);
            //         console.log(data);
            //     }
            // }

            // 使用fetch
            const url = 'http://localhost:3456/api/data'
            let result = await fetch(url)
            let data = await result.json();
            document.getElementById('result').innerHTML = JSON.stringify(data);
            console.log(data)
        }



    </script>
</body>

</html>